<template>
  <div style="width: 100%">
    <h1>服务管理</h1>
    <el-table :data="serviceList" border style="width: 80%;margin-left:120px">
      <el-table-column prop="serviceName" label="名称" width="140">
      </el-table-column>
      <el-table-column prop="serviceTime" label="排期" width="140">
      </el-table-column>
      <el-table-column prop="serviceWeight" label="使用规格" width="140">
      </el-table-column>
      <el-table-column prop="serviceFix" label="服务规格" width="140">
      </el-table-column>
      <el-table-column prop="serviceUsetime" label="耗时" width="140">
      </el-table-column>
      <el-table-column prop="staff.staffLevel" label="服务员等级" width="140">
      </el-table-column>
      <el-table-column prop="servicePrice" label="价格" width="140">
      </el-table-column>

      <el-table-column fixed="right" label="操作" width="200">
        <template slot-scope="scope">
          <el-button
            type="primary"
            icon="el-icon-edit"
            style="width:50px"
            @click="handleUpdate(scope.row)"
          ></el-button>
          <el-button
            type="danger"
            icon="el-icon-delete"
            style="width:50px"
            @click="handleDel(scope.row)"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
      <Pager
      :page="page"
      :limit="limit"
      :total="total"
      :panelNumber="panelNumber"
      @changePage="handleChangePage"
    />
    <br />
    <br />
    <div style="width: 80%;margin-left:120px">
      <div style="margin-left:0px">
        <el-row>
          <el-button type="success" @click="handleAdd()">添加</el-button>
        </el-row>
      </div>
      

      <div style="margin-left:900px">
        <el-input
          placeholder="请输入服务名称"
          v-model="inputQuery"
          style="width:300px"
        >
        </el-input>
        <br />
        <br />
        <el-button type="primary" style="width:100px" @click="handleQuery()">查询</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { showAll, DelService,queryService } from "@/services/ServiceService.js";
import Pager from "@/components/Pager.vue";
export default {
  components: {
    Pager
  },
  inject:['reload'],

  data() {
    return {
      limit: 3,
      panelNumber: 10,
      total: 0,
      inputQuery:"",
      serviceList: []
    };
  },
  async created() {
    console.log("测试：serviceList");
    var resp = await showAll(this.page, this.limit);
    this.serviceList = resp.data.list;
    console.log(this.serviceList);
    this.total = resp.data.total;
    console.log("+++++++++++++++++++++++++")
    console.log(resp);
  },
  methods: {
    handleAdd() {
      this.$router.push({ name: "AddService" });
    },
    handleUpdate(row) {
      this.$router.push({ name: "UpdateService", params: row });
    },
    async handleDel(row) {
      this.$confirm("确定删除????????", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "danger"
      })

        .then(resp => {
          console.log("++++++++++++++++++++++++++++++++++++++++++++++++++")
          console.log(resp)
          if (resp=="confirm") {
            console.log("--------------------------------------------------------")
            console.log(resp)
            var serviceId = row.serviceId;
            var resp = DelService(serviceId).then(res => {
              if (res.data) {
            console.log("删除成功............");
            this.reload();
            // this.$router.push({ name: "Service" });
          } else {
            console.log("删除失败............");
          }
            });
          }
        })
        .catch(err => err);
      // console.log(row.serviceId);

      // var resp = await DelService(serviceId);
      
    },
    async handleQuery(){
      this.$router.push({
        query:{
          page:1
        }
      });
      // console.log("测试输入查询")
      // console.log(this.inputQuery)
      var serviceName = this.inputQuery
      var resp = await queryService(this.page,this.limit,serviceName)
      this.serviceList = resp.data.list 
      this.total = resp.data.total;    
    },
    handleChangePage(newPage) {
      this.$router.push({
        // name: "Service",
        query: {
          page: newPage,
        },
      });
      this.pageServiceList();
    },
    async pageServiceList() {
      var serviceName = this.inputQuery
      var resp = await queryService(this.page,this.limit,serviceName)
      this.serviceList = resp.data.list;
      this.total = resp.data.total;
      // console.log(resp);
      // console.log("测试this.total")
      // console.log(this.total);
    },
  },
  computed: {
    page() {
      return +this.$route.query.page || 1;
    },
  },
};
</script>

<style>
</style>